<template>
    <div>
        <div class="breadcrumb-box">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>我的优惠券</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="coupon container">
            <left-nav-bar :active="active"></left-nav-bar>
            <div class="right" v-if="loading">
                <div class="line-ti">
                    <div>我的优惠券</div>
                </div>
                <div class="coupon-ul" v-show="couponsList.length > 0">
                    <div class="coupon-list td-fsc" :class="{'gery-coupon': item._type === 0}" v-for="(item,index) in couponsList" :key="index">
                        <div class="cou-left">
                            <div>
                                <div>￥</div>
                                <div>{{item.coupon_price}}</div>
                            </div>
                            <div>满{{item.use_min_price}}元可用</div>
                            <s class="c-t"></s>
                            <s class="c-b"></s>
                        </div>
                        <div class="cou-right td-f1">
                            <div v-if="item.applicable_type === 0">通用劵</div>
                            <div v-else-if="item.applicable_type === 0">品类券</div>
                            <div v-else>商品券</div>
                            <div>满{{item.use_min_price}}元可用</div>
                            <div v-if="item._end_time === 0">不限时</div>
                            <div v-else>有效期至：{{ item._end_time }}</div>
                            <div class="bnt gray td-fcc" v-if="item._type === 0">{{ item._msg }}</div>
                            <div class="bnt bg-color-red td-fcc" v-else>{{ item._msg }}</div>
                        </div>
                    </div>
                </div>
                <div class="nodata" v-show="couponsList.length == 0">
                    <img :src="$global.Image.noCoupon"/>
                </div>
<!--                <div class="ad">-->
<!--                    <div>火热广告位</div>-->
<!--                    <div>HOT</div>-->
<!--                </div>-->
            </div>
        </div>
        <div style="height: 200px"></div>
    </div>
</template>

<script>
    import leftNavBar from "@components/leftNavBar";
    import {getCouponsUser} from "@api/user";

    export default {
        data() {
            return {
                active: 4,
                loading:false,
                couponsList: [
                    {
                        'coupon_price': 1200,
                        'use_min_price': 1400,
                        '_end_time': '2019-12-03',
                    }
                ],
            };
        },
        components: {
            leftNavBar
        },
        methods: {
            getCouponList() {
                let that = this,
                    type = 0;
                getCouponsUser(type).then(res => {
                    that.couponsList = res.data;
                    that.loading = true;
                });
            },
        },
        mounted() {
            this.getCouponList()
        }
    };
</script>

<style scoped  rel="stylesheet/scss" lang="scss" scoped>
    $color: #DA213D;
    .coupon {
        /*width: 70%;*/
        margin: 0 auto;
        display: flex;

        .right {
            width: 1000px;
            margin-left: 32px;

            .line-ti {
                width: 100%;
                border-bottom: 1px solid #dbdbdb;

                > div {
                    color: #014a97;
                    font-size: 18px;
                    font-family: MicrosoftYaHei-Bold;
                    border-bottom: 3px solid $color;
                    width: 100px;
                    line-height: 36px;
                    font-weight: 600;
                    text-align: center;
                }
            }

            .coupon-ul {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                margin-top: 40px;
                .coupon-list {
                    width: 49%;
                    display: flex;
                    margin-bottom: 20px;
                    cursor: pointer;

                    .cou-left {
                        background: #DA213D;
                        padding: 0 20px;
                        width: 140px;
                        height: 112px;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        position: relative;
                        > div:nth-of-type(1) {
                            color: #014a97;
                            font-size: 16px;
                            display: flex;
                            line-height: 35px;
                            align-items: center;
                            align-items: baseline;

                            > div:nth-of-type(1) {
                                font-size: 18px;
                            }

                            > div:nth-of-type(2) {
                                font-size: 35px;
                            }
                        }

                        > div:nth-of-type(2) {
                            color: rgba(1, 74, 151, 1);
                            font-size: 13.5px;
                            font-family: PingFangSC-Regular;
                        }
                        .c-t, .c-b{
                            display: block;
                            width: 12px;
                            height: 12px;
                            border-radius: 50%;
                            background-color: #fff;
                            position: absolute;
                            right: -6px;
                            z-index: 2;
                        }
                        .c-t{
                            top: -6px;
                        }
                        .c-b{
                            bottom: -6px;
                        }
                    }

                    .cou-right {
                        background: #eee;
                        height: 112px;
                        display: flex;
                        justify-content: center;
                        flex-direction: column;
                        position: relative;

                        > div:nth-of-type(1) {
                            line-height: 30px;
                            color: rgba(51, 51, 51, 1);
                            font-size: 21.6px;
                            font-family: PingFangSC-Regular;
                        }

                        > div:nth-of-type(2) {
                            color: #999999;
                            font-size: 16.2px;
                            margin-top: 4px;
                        }

                        > div:nth-of-type(3) {
                            color: #999999;
                            font-size: 13.5px;
                            margin-top: 7px;
                        }

                        > div {
                            padding-left: 28px;
                        }
                        .bnt{
                            color: #014a97;
                            position: absolute;
                            top: 10px;
                            right: 10px;
                            width: 56px;
                            height: 24px;
                            border: solid #014a97 1px;
                            border-radius: 15px;
                            padding: 0;
                        }
                    }
                }
                .gery-coupon .cou-left{
                    background-color: #dbdbdb;
                    >div{
                        color: #666 !important;
                    }
                }
            }

            .ad {
                display: flex;
                justify-content: center;
                align-items: center;
                background: #DA213D;
                margin-top: 15px;
                width: 100%;
                height: 139px;
                cursor: pointer;

                > div:nth-of-type(1) {
                    color: rgba(214, 106, 185, 1);
                    font-size: 60px;
                    font-family: MicrosoftYaHei;
                }

                > div:nth-of-type(2) {
                    color: rgba(255, 111, 67, 1);
                    font-size: 60px;
                    font-family: MicrosoftYaHei;
                    margin-left: 32px;
                }
            }
        }

        .noCommodity {
            width: 100%;

            .noPictrue {
                display: flex;
                justify-content: center;
            }
        }
    }
</style>
